<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>computed Option 计算选项</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>computed Option 计算选项</h1>
<hr>
<div id="app">
    {{newPrice}}
    <ul>
        <li v-for="news in reverseList">{{news.title}}--{{news.date}}</li>
    </ul>
</div>
<script type="text/javascript">
  var newsList = [
    {title: '习近平握住老模范的手，请他们坐到自己身旁', date: '2017/11/15'},
    {title: '31省前三季度人均消费榜：京津沪突破2万 西藏最低', date: '2017/11/16'},
    {title: '国务院：划转部分国有资本充实社保基金', date: '2017/11/17'},
    {title: '中国首个在非洲投资建设运营的风电项目投产发电', date: '2017/11/18'}
  ]
  var app = new Vue({
    el: '#app',
    data: {
      price: 100,
      newsList: newsList
    },
    computed: {
      newPrice () {
        return '￥' + this.price + '元'
      },
      reverseList () {
        var reverseNews = newsList
        return reverseNews.reverse()
      }
    }
  })
</script>
</body>
</html>